<template>
    <section class="product-diamonds-box">
      <ul class="product-box">
        <li v-for="(item,index) in productData">
          <div>
            <img v-lazyc="item.slide_url" alt="" @click="handleProduct" />
            <p class="product-name clamp2" @click="handleProduct">{{item.name}}</p>
            <p class="price">
              <i>￥</i>{{item.discount_price}}
              <span class="pr inline-block text-c fs17" @click="handleChooseSku(item.id)">
                <i class="fs17 iconfont icongouwuchex1"></i>
              </span>
              <del>
                ￥{{item.discount_price}}
              </del>
            </p>
          </div>
        </li>
      </ul>
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {

      }
    },
    props:['productData'],
    created() {
      this.$nextTick(function() {
        $('img').css('height',$('img').width())
      })
    },
    methods: {
      handleChooseSku(id) {
        this.$emit('handleChooseSku', id)
      },
      handleProduct(id){
        this.$emit('getProductId',{id:id})
      }
    },
  }
</script>

<style scoped lang="scss">
  @import "../assets/css/base";

  .product-diamonds-box{
    width: 100%;

    .product-box{
      width: 100%;
      display: flex;
      padding:0 15px;
      box-sizing: border-box;
      flex-wrap: wrap;

      li{
        width: calc((100% - 9px) / 2);
        font-size: 14px;
        color: #45454D;
        margin-top: 10px;

        img{
          width: 100%;
          max-width: 100%;
          border-radius:2px;
        }

        .product-name,
        .price{
          padding:0 8px;
          box-sizing: border-box;
        }

        .price{
          color: #C55E5E;
          font-size: 16px;
          font-weight: bold;


          i{
            font-size: 12px;
            font-style: normal;
          }

          span,
          del{
            font-weight: normal;
            font-size: 12px;
            color: #7A7B82;
          }

          span{
            top: 3px;
            float: right;
            background: #F7F7F7;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border-radius: 50%;

            i {
              color: #757575;
            }
          }
        }
      }
       li:nth-child(2n){
         margin-left: 9px;
       }
    }
  }
</style>
